const path = require('path')
const ESLintWebpackPlugin = require("eslint-webpack-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");

//webpack是基于nodejs,所以采用Commonjs模块化规范
module.exports = {
    //五大核心概念
    //从哪个文件开始打包
    entry:'./src/main.js',
    //输出
    output:{
        //path:文件输出的路径
        //path.resolve()方法返回一个绝对路径，__dirname当前文件的文件夹绝对路径
        path:undefined,
        //文件输出名
        filename:"static/js/main.js",
        //  自动清理上次打包目录资源
        // clean:true,
    },
    //加载器，只识别js文件，不识别css文件，所以需要先加载css，在创建style标签，最后在引入到需要打包的文件中即可
    module:{
        rules:[
            {
                test:/\.css$/,
                use:[
                    "style-loader",
                    "css-loader",
                ]
            },
            {
                test:/\.less$/,
                use:[
                    "style-loader",
                    "css-loader",
                    "less-loader"
                ]
            },
            {
                test:/\.s[ac]ss$/,
                use:[
                    "style-loader",
                    "css-loader",
                    "sass-loader"
                ]
            },
            //图片在webpack5中已经内置到webpack了。
            {
                test:/\.(png|jpe?g|gif|webp)$/,
                type:"asset",   //将文件转化为webpack能识别的文件，同时小于某个大小的资源会处理成 data URI 形式，相当于url-loader(webpack4)
                parser:{
                    dataUrlCondition:{
                        maxSize:10*1024 //小于10kb的图片会被base64处理，转换成base64，减少请求次数,但是占用内存会更大
                    }
                },
                generator:{
                    // 将图片文件输出到 static/imgs 目录中
                    // 将图片文件命名 [hash:8][ext][query]
                    // [hash:8]: hash值取8位
                    // [ext]: 使用之前的文件扩展名
                    // [query]: 添加之前的query参数
                    filename:"static/imgs/[hash:8][ext][query]"
                }
            },
            //引入字体，其他文件资源也是一样（视频音频等）
            {
                test: /\.(ttf|woff2?|map4|map3|avi)$/,
                type: "asset/resource", //将文件转化为webpack能识别的资源,不做其他任何处理，相当于file-loader(webpack4)
                generator: {
                    filename: "static/media/[hash:8][ext][query]",
                  },  
            }
        ],
    },
    //插件
    plugins:[
        new ESLintWebpackPlugin({
            context:path.resolve(__dirname,"../src")
        }),
        // 以 public/index.html 为模板创建文件 以 public/index.html 为模板创建文件
        //新的html文件有两个特点：1.内容和源文件一致，2.自动引入打包生成的js等资源
        new HtmlWebpackPlugin({
            template:path.resolve(__dirname,"../public/index.html")
        })
    ],
    //配置服务，每次更新完代码无需npx webpack编译代码，在dist文件中并不会生成文件。只需要运行npx webpack server即可
    devServer:{
        host:"localhost",
        port:"3000",
        open:true
    },
    //模式:development/production
    mode:"development"
}